<template>
	<view class="container" :style="{backgroundImage:'url('+my_sp_bg+')'}"
		style="background-size: 100%;background-position: center top;display: flex;flex-direction: column;">
		<navigationBar :myProperty="propertyInfo"></navigationBar>
		<view style="height: 300rpx;"></view>
		<view class="center-box">
			<view v-for="(item,index) in dataList" :key="index" class="item-box" @click="itemClick(item)">
				<view class="flex-around">
					<image :src="item.merchandiseUrl||'/static/images/mo_ren_pic.png'" mode="" class="i-img"></image>
					<view class="i-name-box">
						<view class="i-name-1 limit-text-single-line">{{item.merchandiseName}}
						</view>
						<view class="i-name-2 limit-text-single-line">{{item.virtualGoodsName||'???'}}</view>
						<view class="i-name-3 limit-text-single-line">购买时间：{{item.createTime}}</view>
					</view>
					<view class="i-state-box" :style="{visibility:item.isCompleted=='N'?'visible':'hidden'}">
						<view class="i-state flex-cc">待完成</view>
					</view>
				</view>
			</view>
			<MailunEntry sourceType="18" isResAd v-if="isLoadFlag&&(!dataList||dataList.length==0)" />
		</view>
		<view class="send-gift flex-cc" @click="lookGiftIntroduce">发货说明</view>

		<!-- 弹窗 -->
		<template>
			<contactOursPop ref="contactOursPop" />
			<!-- 联系我们 - 绝对定位 -->
			<view class="service-icon-float" @click="contactOursClick()">
				<image :src="serviceImg" mode=""></image>
			</view>
		</template>
		<!-- 弹窗 -->
	</view>
</template>

<script>
	import contactOursPop from '@/components/contactOursPop/contactOursPop.vue'
	import MailunEntry from '@/components/MailunEntry.vue'
	import {
		getMerchandiseReportPage
	} from '@/common/api/index_api.js'
	export default {
		components: {
			MailunEntry,
			contactOursPop
		},
		data() {
			return {
				my_sp_bg: this.$imgWxkjUrl + '/product/my_sp_bg.png',
				serviceImg: this.$imgWxkjUrl + '/product/me_server_float_icon.png',
				propertyInfo: {
					"bg_color": "transparent",
					"color": "#333",
					"flag": 1,
					"name": "我的商品",
					"hasEntity": false,
				},
				shareData: {
					title: '定制我的脉轮水晶',
					path: '/pages/index/index?userType=mailun',
					imageUrl: this.$imgWxkjUrl + '/product/mailun_share_new_new.png'
				},
				dataList: [],
				pageNo: 1,
				isLoadFlag: false
			}
		},
		onLoad() {

		},
		onReachBottom() {
			this.pageNo++;
			this.getDataList()
		},
		onShow() {
			this.pageNo = 1;
			this.getDataList();
		},
		methods: {
			contactOursClick() {
				this.$refs.contactOursPop.showPopup();
			},
			lookGiftIntroduce() {
				uni.navigateTo({
					url: '/subcontractorMaiLun/pages/shippingInstructions/shippingInstructions'
				})
			},
			itemClick(item) {
				if (item.sclReportId) {
					uni.navigateTo({
						url: '/subcontractorB/pages/sclResult/sclResult?id=' + item.reportId
					})
				} else {
					uni.navigateTo({
						url: '/subcontractorMaiLun/pages/startMaiLun/startMaiLun?sclId=' + item.sclId
					})
				}
			},
			getDataList() {
				getMerchandiseReportPage({
					pageNo: this.pageNo
				}).then(res => {
					res = res.data
					if (this.pageNo == 1) {
						this.dataList = res.data.rows
					} else {
						this.dataList = this.dataList.concat(res.data.rows)
					}
				}).finally(() => {
					this.isLoadFlag = true;
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.service-icon-float {
		position: fixed;
		right: 0;
		top: 562rpx;

		&,
		image {
			height: 120rpx;
			width: 112rpx;
		}
	}

	.send-gift {
		width: 170rpx;
		height: 58rpx;
		background: #FFFFFF;
		border-radius: 29rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #747BB0;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 70rpx;
	}

	.i-img {
		width: 166rpx;
		height: 166rpx;
		display: block;
		border-radius: 20rpx;
		flex-shrink: 0;
	}

	.item-box {
		width: 715rpx;
		height: 210rpx;
		background: rgba(255, 255, 255, 0.42);
		border-radius: 10rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;
		padding: 22rpx 27rpx;
		box-sizing: border-box;
	}

	.i-name-box {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.i-name-1 {
		width: 100%;
		font-size: 30rpx;
		color: #2E3670;
		line-height: 42rpx;
		text-align: justify;
	}

	.i-name-2 {
		width: 100%;
		font-size: 30rpx;
		color: #2E3670;
		font-weight: bold;
		line-height: 42rpx;
		text-align: justify;
		margin-top: 18rpx;
	}

	.i-name-3 {
		width: 100%;
		font-size: 26rpx;
		color: #2E3670;
		line-height: 42rpx;
		text-align: justify;
		margin-top: 18rpx;
	}

	.i-state {
		width: 167rpx;
		height: 54rpx;
		background: linear-gradient(180deg, #8BE4FE 0%, #25C7EC 100%);
		border-radius: 63rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		position: absolute;
		left: 0;
		top: 30rpx;
	}

	.i-state-box {
		width: 176rpx;
		height: 100%;
		position: relative;
		flex-shrink: 0;
	}

	.center-box {
		width: 100%;
		height: 100%;
		flex: 1;
		background: rgba(255, 255, 255, 0.53);
		border-radius: 49rpx 49rpx 0px 0px;
		backdrop-filter: blur(28rpx);
		padding: 50rpx 0rpx;
		padding-bottom: 120rpx;
		box-sizing: border-box;
		position: relative;
	}
</style>